import React from 'react';
import PropTypes from 'prop-types';


// 这是通过组件嵌套组件，基于props的数据一层一层往里传值

// react提供context来解决组件间跨级传值

// 孙级组件
class Son extends React.Component {

    // 3.限制传入的数据类型
    static contextTypes = {
        sum: PropTypes.number
    };

    render() { 
        return <div>
            孙级组件接收最外层组件的传值{this.props.num}
            <br />
            context跨级孙级组件接收最外层组件的传值{this.context.sum}
        </div>;
    }
}

// 子级组件
class Child extends React.Component {
    render() { 
        return <div>
            <Son num={this.props.num} />
        </div>;
    }
}


// 最外层组件
class ContextLevel extends React.Component {
    // 1.定义静态属性传值类型 上下文
    static childContextTypes = {
       sum: PropTypes.number
    };

    // 2.给上下文传入数据 不管孙组件或是子组件都可获取到该数据
    getChildContext(){
        return {
            sum: 888
        }
    }

    render() { 
        return <div>
            <Child num={666} />
        </div>;
    }
}
 
export default ContextLevel;